<template>
  <div class="app-container cjxdqkView">
    <el-form ref="form" :model="form" :rules="rules">
      <BorderView title="采集吸毒情况" />
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item label="初次吸毒时间*" label-class-name="labelBg">
          <el-form-item prop="ccxdsj">
            <el-date-picker
              v-model="form.ccxdsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择初次吸毒时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="初次因吸毒被查获时间*"
          label-class-name="labelBg"
        >
          <el-form-item prop="ccxdbchsj">
            <el-date-picker
              v-model="form.ccxdbchsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择初次因吸毒被查获时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="前科情况*" label-class-name="labelBg">
          <el-form-item prop="qkqk">
            <el-input v-model="form.qkqk" placeholder="请输入前科情况" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="最后一次吸毒被拘留/戒毒开始时间*"
          label-class-name="labelBg"
        >
          <el-form-item prop="zhycxdbjljdkssj">
            <el-date-picker
              v-model="form.zhycxdbjljdkssj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择最后一次吸毒被拘留/戒毒开始时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="最后一次吸毒被拘留/戒毒结束时间*"
          label-class-name="labelBg"
        >
          <el-form-item prop="zhycxdbjljdjssj">
            <el-date-picker
              v-model="form.zhycxdbjljdjssj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择最后一次吸毒被拘留/戒毒结束时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="是否与他人一起吸毒"
          label-class-name="labelBg"
        >
          <el-form-item prop="sfytrzyqxd">
            <el-select
              v-model="form.sfytrzyqxd"
              placeholder="请输入是否与他人一起吸毒"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="累计戒毒次数*" label-class-name="labelBg">
          <el-form-item prop="ljjdcs">
            <el-input v-model="form.ljjdcs" placeholder="请输入累计戒毒次数" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="累计戒毒时间*" label-class-name="labelBg">
          <el-form-item prop="ljjdsj">
            <el-select
              v-model="form.ljjdsj"
              placeholder="请选择累计戒毒时间"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.ljjdsj"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="周均吸毒次数*" label-class-name="labelBg">
          <el-form-item prop="zjxdcs">
            <el-select
              v-model="form.zjxdcs"
              placeholder="请选择周均吸毒次数"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.zjxdcs"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="吸毒后的自我感觉(对自身)*"
          label-class-name="labelBg"
        >
          <el-form-item prop="xdhdzwgjdzs">
            <el-select
              v-model="form.xdhdzwgjdzs"
              placeholder="请选择吸毒后的自我感觉"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.xdhdzwgjdss"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="吸毒后的自我感觉(对家庭)*"
          label-class-name="labelBg"
        >
          <el-form-item prop="xdhdzwgjdjt">
            <el-select
              v-model="form.xdhdzwgjdjt"
              placeholder="请选择吸毒后的自我感觉"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.xdhdzwgjdjt"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="吸毒后的自我感觉(对社会)*"
          label-class-name="labelBg"
        >
          <el-form-item prop="xdhdzwgjdsh">
            <el-select
              v-model="form.xdhdzwgjdsh"
              placeholder="请选择吸毒后的自我感觉"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.xdhdzwgjdsh"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="吸毒方式*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item prop="xdfsList">
            <el-checkbox-group v-model="form.xdfsList">
              <el-checkbox
                v-for="(item, index) in dict.type.xdfs"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="毒品来源*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item prop="dplyList">
            <el-checkbox-group v-model="form.dplyList">
              <el-checkbox
                v-for="(item, index) in dict.type.dply"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="吸毒场所*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item prop="xdcsList">
            <el-checkbox-group v-model="form.xdcsList">
              <el-checkbox
                v-for="(item, index) in dict.type.xdcs"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="吸毒氛围*"
          label-class-name="labelBg"
          :span="3"
        >
          <el-form-item prop="xdfwList">
            <el-checkbox-group v-model="form.xdfwList">
              <el-checkbox
                v-for="(item, index) in dict.type.xdfw"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="初次吸毒原因*"
          label-class-name="labelBg"
          :span="3"
        >
          <el-form-item prop="ccxdyyList">
            <el-checkbox-group v-model="form.ccxdyyList">
              <el-checkbox
                v-for="(item, index) in dict.type.ccxdyy"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="吸毒资金来源*"
          label-class-name="labelBg"
          :span="3"
        >
          <el-form-item prop="xdzjlyList">
            <el-checkbox-group v-model="form.xdzjlyList">
              <el-checkbox
                v-for="(item, index) in dict.type.xdzjly"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="戒毒后产生负面情绪原因*"
          label-class-name="labelBg"
          :span="3"
        >
          <el-form-item prop="jdhcsfmqxyyList">
            <el-checkbox-group v-model="form.jdhcsfmqxyyList">
              <el-checkbox
                v-for="(item, index) in dict.type.jdhcsfmqxyy"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="复吸毒品原因(心里因素)*"
          label-class-name="labelBg"
          :span="3"
        >
          <el-form-item prop="fxdpyyxlysList">
            <el-checkbox-group v-model="form.fxdpyyxlysList">
              <el-checkbox
                v-for="(item, index) in dict.type.fxdpyyxlys"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="复吸毒品原因(身体因素)*"
          label-class-name="labelBg"
          :span="3"
        >
          <el-form-item prop="fxdpyystysList">
            <el-checkbox-group v-model="form.fxdpyystysList">
              <el-checkbox
                v-for="(item, index) in dict.type.fxdpyystys"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="复吸毒品原因(社会环境因素)*"
          label-class-name="labelBg"
          :span="3"
        >
          <el-form-item prop="fxdpyyshhjysList">
            <el-checkbox-group v-model="form.fxdpyyshhjysList">
              <el-checkbox
                v-for="(item, index) in dict.type.fxdpyyshhjys"
                :key="index"
                :label="item.value"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: right; margin-top: 20px"
    >
      <el-button @click="cancel">重置</el-button>
      <el-button :loading="buttonLoading" type="primary" @click="submitForm"
        >下一步</el-button
      >
    </div>
  </div>
</template>
<script>
import {
  updateUser,
  getUser,
} from "@/api/user/userInfo";

import BorderView from "@/views/components/BorderTitleView/index.vue";
export default {
  components: {
    BorderView,
  },
  props: {
    zdgzId: {
      type: String,
    },
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 表单参数
      form: {
        ljjdsj: [],
        xdfsList: [],
        dplyList: [],
        xdcsList: [],
        xdfwList: [],
        ccxdyyList: [],
        xdzjlyList: [],
        jdhcsfmqxyyList: [],
        fxdpyyxlysList: [],
        fxdpyystysList: [],
        fxdpyyshhjysList: [],
      },
      // 表单校验

      rules: {
        ccxdsj: [
          { required: true, message: "初次吸毒时间不能为空", trigger: "blur" },
        ],
        ccxdbchsj: [
          {
            required: true,
            message: "初次因吸毒被查获时间不能为空",
            trigger: "blur",
          },
        ],
        qkqk: [
          { required: true, message: "前科情况不能为空", trigger: "blur" },
        ],
        zhycxdbjljdkssj: [
          {
            required: true,
            message: "最后一次吸毒被拘留/戒毒开始时间不能为空",
            trigger: "blur",
          },
        ],
        zhycxdbjljdjssj: [
          {
            required: true,
            message: "最后一次吸毒被拘留/戒毒结束时间不能为空",
            trigger: "blur",
          },
        ],
        sfytryqxd: [
          {
            required: true,
            message: "是否与他人一起吸毒不能为空",
            trigger: "blur",
          },
        ],
        ljjdcs: [
          { required: true, message: "累计戒毒次数不能为空", trigger: "blur" },
        ],
        ljjdsj: [
          { required: true, message: "累计戒毒时间不能为空", trigger: "blur" },
        ],
        zjxdcs: [
          { required: true, message: "周均吸毒次数不能为空", trigger: "blur" },
        ],
        xdhdzwgjdzs: [
          {
            required: true,
            message: "吸毒后的自我感觉不能为空",
            trigger: "blur",
          },
        ],
        xdhdzwgjdjt: [
          {
            required: true,
            message: "吸毒后的自我感觉不能为空",
            trigger: "blur",
          },
        ],
        xdhdzwgjdsh: [
          {
            required: true,
            message: "吸毒后的自我感觉不能为空",
            trigger: "blur",
          },
        ],
        xdfsList: [
          { required: true, message: "吸毒方式不能为空", trigger: "blur" },
        ],
        dplyList: [
          { required: true, message: "毒品来源不能为空", trigger: "blur" },
        ],
        xdcsList: [
          { required: true, message: "吸毒场所不能为空", trigger: "blur" },
        ],
        xdfwList: [
          { required: true, message: "吸毒氛围不能为空", trigger: "blur" },
        ],
        ccxdyyList: [
          { required: true, message: "初次吸毒原因不能为空", trigger: "blur" },
        ],
        xdzjlyList: [
          { required: true, message: "吸毒资金来源不能为空", trigger: "blur" },
        ],
        jdhcsfmqxyyList: [
          {
            required: true,
            message: "戒毒后产生负面情绪原因不能为空",
            trigger: "blur",
          },
        ],
        fxdpyyxlysList: [
          { required: true, message: "复吸毒品原因不能为空", trigger: "blur" },
        ],
        fxdpyystysList: [
          { required: true, message: "复吸毒品原因不能为空", trigger: "blur" },
        ],
        fxdpyyshhjysList: [
          { required: true, message: "复吸毒品原因不能为空", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    zdgzId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          getUser(newV).then((res) => {
            if (res.data) {
              this.form = res.data;
            } else {
              this.reset();
            }
          });
        }
      },
    },
  },
  dicts: [
    "sys_yes_no",
    "xdhdzwgjdss",
    "xdhdzwgjdjt",
    "xdhdzwgjdsh",
    "ljjdsj",
    "zjxdcs",
    "xdfs",
    "dply",
    "xdcs",
    "xdfw",
    "ccxdyy",
    "xdzjly",
    "jdhcsfmqxyy",
    "fxdpyyxlys",
    "fxdpyystys",
    "fxdpyyshhjys",
  ],
  methods: {
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          updateUser(this.form)
            .then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("goto-next", 3);
            })
            .finally(() => {
              this.buttonLoading = false;
            })
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ccxdsj: undefined,
        ccyxdbchsj: undefined,
        qkqk: undefined,
        zhycxdbjljdkssj: undefined,
        zhycxdbjljdjssj: undefined,
        sfytryqxd: undefined,
        ljjdcs: undefined,
        ljjdsj: undefined,
        zjxdcs: undefined,
        xdhdzwgjdss: undefined,
        xdhdzwgjdjt: undefined,
        xdhdzwgjdsh: undefined,
        xdfsList: [],
        dplyList: [],
        xdcsList: [],
        xdfwList: [],
        ccxdyyList: [],
        xdzjlyList: [],
        jdhcsfmqxyyList: [],
        fxdpyyxlysList: [],
        fxdpyystysList: [],
        fxdpyyshhjysList: [],
      };
      this.resetForm("form");
    },
  },
};
</script>
<style>
.labelBg {
  background: rgb(241, 243, 244) !important;
}
</style>
<style scoped>
.cjxdqkView /deep/.el-descriptions--small.is-bordered .contentBg {
  padding: 0 !important;
}
.cjxdqkView .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
  padding: 0px;
}
.cjxdqkView /deep/ .el-input__inner {
  border: none !important;
}
.cjxdqkView /deep/ .el-textarea__inner {
  border: none !important;
}
.cjxdqkView /deep/ .el-form-item {
  margin-bottom: 0 !important;
}
</style>
